<template>
  <div class="part2">
    <h1>vue语法</h1>
    <h2>表单数据双向绑定</h2>
    <h3>文本</h3>
    <p>@input</p>
    <input type="text" @input="handInput">
    <p>handInput输入文本 </p>
    <p>{{inputMessage}}</p>
    <p>v-model</p>
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
    <h3>单选框</h3>
    <h4>单一使用</h4>
    <p>可以去选中,去不可以改为非选中</p>
    <input type="radio" :checked="one">

    <h4>复合使用</h4>
    <label for="a">a</label>
    <input type="radio" name="a" id="a" v-model="picked" value="a">
    <label for="b">b</label>
    <input type="radio" name="b" id="b" v-model="picked" value="b">
    <label for="c">c</label>
    <input type="radio" name="c" id="c" v-model="picked" value="c">
    <p>{{picked}}</p>

    <h4>复合使用</h4>
    <label for="a">a</label>
    <input type="checkbox" name="a" id="a" v-model="checked" value="a">
    <label for="b">b</label>
    <input type="checkbox" name="b" id="b" v-model="checked" value="b">
    <label for="c">c</label>
    <input type="checkbox" name="c" id="c" v-model="checked" value="c">
    <p>{{checked}}</p>

    <h3>下拉框</h3>
    <h4>单一选中状态</h4>
    <select v-model="selected">
      <option v-for="(option,index) in options" :value="option.value" :key="index">{{option.text}}</option>
    </select>
    <p>所选中选项{{selected}}</p>
    <h4>复选中状态</h4>
    <select v-model="selectedes" multiple>
      <option v-for="(option,index) in options" :value="option.value" :key="index">{{option.text}}</option>
    </select>
    <p>所选中选项{{selectedes}}</p>

  </div>
</template>

<script>
export default {
  name: "part2",
  props: {},
  data() {
    return {
      inputMessage: "",
      msg: "",
      one: true,
      picked:"a",
      checked:["b"],
      options:[{
        text:"html",
        value:"html",
      },{
        text:"css",
        value:"css",
      },{
        text:"JavaScript",
        value:"js",
      },],
      selected:'',
      selectedes:["js","css"],
    };
  },
  methods: {
    handInput(e) {
      this.inputMessage = e.target.value;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
